<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<meta name="screen-orientation" content="portrait" />
		<meta name="x5-orientation" content="portrait" />
		<meta name="format-detection" content="telephone=no" />
		<meta name="msapplication-tap-highlight" content="no" />
		<link rel="stylesheet" href="../../js/plugins/element-ui/element-ui.css">
		<link rel="stylesheet" href="../../css/common.css">
		<link rel="stylesheet" href="../../css/admin/index.css">
		<title>新闻列表</title>
	</head>

	<body>

		<div id="news-list">
			<div class="haed-btn">
				<el-button type="success"  v-on:click="add('news/add.html')"><i class="el-icon-plus"></i> 添加</el-button>
			</div>

			<table class="u-table" cellpadding="0" cellspacing="0">
				<tr>
					<th>序号</th>
					<th>新闻标题</th>
					<th>内容</th>
					<th>分类</th>
					<th>是否启用</th>
					<th>是否审核</th>
					<th>操作</th>
				</tr>
				<tr v-cloak v-for="(item,index) in list">
					<td><span v-if='item.userName'>—</span> {{item.id}}</td>
					<td>{{item.userName}}</td>
					<td>{{item.mobile}}</td>
					<td>
						<p v-if='item.isUse'>显示</p>
						<p v-else class="red">隐藏</p>
					</td>
					<td>{{item.lastactivitydate}}</td>
					<td>
						<a href="javascript:void(0);" v-on:click="startEdit(index)">编辑</a>
						<a class="red" href="javascript:void(0);" v-on:click="remove(index)">删除</a>
					</td>
				</tr>
			</table>
			<div class="page-bar">
				<ul>
					<li v-if="cur>1">
						<a v-on:click="cur--,pageClick()">上一页</a>
					</li>
					<li v-if="cur==1">
						<a class="banclick">上一页</a>
					</li>
					<li v-if="cur>=num-1">
						<a v-on:click="btnClick(1)">1</a>
					</li>
					<li v-if="cur>=num">
						<a>...</a>
					</li>
					<li v-sele v-for="index in indexs" v-bind:class="{'active': cur == index}">
						<a v-on:click="btnClick(index)">{{ index }}</a>
					</li>
					<li v-if="cur>=num && cur<=all-num">
						<a>....</a>
					</li>
					<li v-if="cur>=num && cur<=all-num+2">
						<a v-on:click="btnClick(all)">{{all}}</a>
					</li>
					<li v-if="cur!=all">
						<a v-on:click="cur++,pageClick()">下一页</a>
					</li>
					<li v-if="cur == all">
						<a class="banclick">下一页</a>
					</li>
					<li>
						<a>共<i>{{all}}</i>页</a>
					</li>
				</ul>
			</div>
		</div>

		<script type="text/javascript" src="../../js/plugins/vue/vue.min.js"></script>
		<script type="text/javascript" src="../../js/plugins/element-ui/element-ui.js"></script>
		<script type="text/javascript" src="../../js/plugins/jQuery/jquery-3.1.1.min.js"></script>
		<script type="text/javascript" src="../../js/plugins/vue-router/vue-router.min.js"></script>
		<script type="text/javascript" src="../../js/util/util.js"></script>
		<script type="text/javascript" src="../../js/admin/main.js"></script>
		<script>
			var VM = new Vue({
				el: '#news-list',
				data: {
					all: 100, //总页数
					cur: 1, //当前页码
					row: 100, //显示多条数据
					num: 5, //显示多少页码
					nowEditCol: -1, //当前编辑的行
					editStatus: false, //当前是否在编辑状态
					list: [{
							"id": "系统管理",
							"userName": "",
							"mobile": "系统管理员",
							"isUse": true,
							"lastactivitydate": "1"
						}
					],
					oldData: [],
					newlist: []
				},
				watch: { //组件交互
					cur: function(oldValue, newValue) {
						//console.log(oldValue+"====="+newValue);
						// console.log(arguments);
					}
				},
				methods: { //事件处理
					btnClick: function(data) { //页码点击事件
						if(data != this.cur) {
							this.cur = data
							this.$options.methods.__ajax.bind(this)(this.cur); //调用AJAX
						}

					},
					pageClick: function() { //点击上一页下一页
						console.log('现在在' + this.cur + '页');
						this.$options.methods.__ajax.bind(this)(this.cur); //调用AJAX
					},
					__ajax: function(index) { //
						var slfe = this;
						$.ajax({
							type: "get",
							data: {
								"page": index
							},
							url: "../data/json/table.json",
							async: true,
							success: function(data) {
								var data = data.splice(1, 2)
								slfe.list = data;
								//slfe.list.$set(slfe.$data, "list", data);//强制渲染
								//slfe.$forceUpdate(); //强制渲染
							},
							error: function(data) {
								//console.log(data)
							}
						});
					},
					remove: function(index) { //删除
						this.list.splice(index, 1);
					},
					add: function(url) { //添加
                          window.parent.document.getElementById("minWarp").src=url
					},
					startEdit: function(index) { //启动编辑
						this.nowEditCol = index;
					},
				},
				computed: {
					indexs: function() { //分页
						var left = 1;
						var right = this.all;
						var ar = [];
						if(this.all >= this.num) {
							if(this.cur > 3 && this.cur < this.all - 2) {
								left = this.cur - 2
								right = this.cur + 2
							} else {
								if(this.cur <= 3) {
									left = 1
									right = this.num
								} else {
									right = this.all
									left = this.all - 4
								}
							}
						}
						while(left <= right) {
							ar.push(left)
							left++
						}
						return ar
					}
				},
				mounted: function() { //加载完成后执行
					var slfe = this;

				}
			})
		</script>

	</body>

</html>